<!-- 编辑弹窗 -->
<template>
  <el-dialog
    width="750px"
    :visible="visible"
    :lock-scroll="false"
    :destroy-on-close="true"
    custom-class="ele-dialog-form"
    :title="isUpdate?'修改商品分类':'添加商品分类'"
    @update:visible="updateVisible">
    <el-form
      ref="form"
      :model="form"
      :rules="rules"
      label-width="92px"
      @keyup.enter.native="save"
      @submit.native.prevent>

      <el-row :gutter="15">
        <el-col :sm="12">
          <el-form-item label="分类名称:" prop="cate_name">
            <el-input
              clearable
              v-model="form.cate_name"
              placeholder="请输入分类名称"/>
          </el-form-item>

          <el-form-item label="上级分类:">
            <treeselect
              :options="selfCateList"
              v-model="form.pid"
              :defaultExpandLevel="3"
              :normalizer="normalizer"
              placeholder="请选择上级分类"/>
          </el-form-item>

          <el-form-item label="分类图标:" >
            <uploadImage :limit="1" v-model="form.pic"></uploadImage>
          </el-form-item>



        </el-col>


        <el-col :sm="12">
          <el-form-item label="所属模块:" prop="type">
            <el-select
              filterable
              clearable
              v-model="form.type"
              placeholder="-请选择模块-"
              @change="handleAChange"
              class="ele-block">
              <el-option v-for="item in productItemList" :key="item.id" :label="item.name" :value="item.id"/>
            </el-select>
          </el-form-item>


          <el-form-item label="排序号:" prop="sort">
            <el-input-number
              :min="0"
              v-model="form.sort"
              placeholder="请输入排序号"
              controls-position="right"
              class="ele-fluid ele-text-left"/>
          </el-form-item>

          <el-form-item label="选中图标:" >
            <uploadImage :limit="1" v-model="form.img"></uploadImage>
          </el-form-item>

        </el-col>
      </el-row>





    </el-form>
    <div slot="footer">
      <el-button @click="updateVisible(false)">取消</el-button>
      <el-button
        type="primary"

        @click="save">保存
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
import Treeselect from '@riophae/vue-treeselect';
import '@riophae/vue-treeselect/dist/vue-treeselect.css';
import uploadImage from '@/components/uploadImage'


export default {
  name: 'ItemCateEdit',
  components: {Treeselect, uploadImage},
  props: {
    // 弹窗是否打开
    visible: Boolean,
    // 修改回显的数据
    data: Object,
    // 全部栏目数据
    cateList: Array
  },
  data() {
    return {
      selfCateList:[],
      // 表单数据
      form: this.initFormData(this.data),
      // 表单验证规则
      rules: {
        cate_name: [
          {required: true, message: '请输入商品分类名称', trigger: 'blur'}
        ],
        type: [
          {required: true, message: '请选择所属商品模块', trigger: 'blur'}
        ],
        sort: [
          {required: true, message: '请输入排序号', trigger: 'blur'}
        ]
      },

      // 是否是修改
      isUpdate: false,
      // 商品模块列表
      productItemList: [
        {id: 0,name:"请选择模块"}
        ],
    };
  },
  watch: {
    data() {
      this.isUpdate = !!(this.data && this.data.id);
      this.form = this.initFormData(this.data);
    }
  },

  mounted() {
    this.selfCateList=this.cateList
    // 获取站点列表
    this.getProductItemList();
  },
  methods: {
    handleAChange(value) {
       console.log('---handleAChange---',value)
       this.getTreeList(value)

    },

    getTreeList(type=0) {


      this.$httpRequest.get('/product/category/index',{type:type}).then(result => {
        this.form.pid = null;
        this.selfCateList = this.$util.toTreeData(result.data, 'id', 'pid');

      }).catch(e => {

        this.$message.error(e.message)
      });
    },

    /* 下拉树格式化 */
    normalizer(d) {
      return {
        id: d.id,
        label: d.cate_name,
        children: d.children || undefined
      };
    },
    /* 保存编辑 */
    save() {
      this.$refs['form'].validate((valid) => {
        if (valid) {

          this.$http.post('/product/category/edit',
            Object.assign({}, this.form, {
              pid: this.form.pid || 0
            })
          ).then(res => {

            if (res.data.code === 0) {
              this.$message.success(res.data.msg);
              this.updateVisible(false);
              this.$emit('done');
            } else {
              this.$message.error(res.data.msg);
            }
          }).catch(e => {

            this.$message.error(e.message);
          });
        } else {
          return false;
        }
      });
    },
    /* 更新visible */
    updateVisible(value) {
      this.$emit('update:visible', value);
    },
    /* 初始化form数据 */
    initFormData(data) {
      // 初始化默认值
      let form = {status: 1, is_cover: 2};
      if (data) {
        Object.assign(form, data, {
          pid: data.pid === 0 ? null : data.pid,
        });
      }
      return form;
    },

    /**
     * 获取商品模块列表
     */
    getProductItemList() {
      this.$httpRequest.get('/product/item/list').then(result => {
        console.log('----product/item/list----',result);
        if (result.code === 0) {
          this.productItemList = this.productItemList.concat(result.data);
          //this.productItemList = result.data;
        }
      }).catch(e => {
        this.$message.error(e.message)
      });

    }
  }
}
</script>

<style scoped>
</style>
